<template>
    <el-row class="race-info">
        <el-col :span="4">
           <e-img-match class="logo" :src="data.logoUrl" />
        </el-col>
        <el-col :span="20">
            <ul class="small">
                <li>
                    <h1 class="match-name">
                      {{data.matchName}}
                      <template v-if="data.isPreview && data.type!=='run'&&data.groupTypeList&& data.groupTypeList.length">
                          ({{data.groupTypeList[0].groupTypeStr}})
                      </template>
                    </h1>
                    <match-status :status="data.status"></match-status>
                </li>
                <li>
                    <i v-if="data.matchType==3001" class="iconfont">&#xe75f;</i>
                    <i v-if="data.matchType==3002" class="iconfont">&#xe60c;</i>
                    <i v-if="data.matchType==3003 || data.matchType==300301 " class="iconfont">&#xe604;</i>
                    <i v-if="data.matchType==3004 || data.matchType==300401" class="iconfont">&#xe62e;</i>
                    <i v-if="data.matchType==3005 || data.matchType==300501" class="iconfont">&#xe62d;</i>
                    <i v-if="data.matchType==3006 || data.matchType==3000" class="iconfont">&#xe6c6;</i>
                    <template v-if="data.matchType==3000">
                      其他
                    </template>
                    <template v-else>
                      {{data.matchTypeStr}}
                    </template>
                </li>
                <li>
                    <i class="iconfont">&#xe60f;</i>{{ data.startTime && new Date(data.startTime).format() }} - {{data.endTime&&new Date(data.endTime).format() }}
                </li>
                <li>
                    <i class="iconfont">&#xe627;</i>{{data.provinceStr + ' ' + data.cityStr  }}
                </li>
                <li>
                    <i class="iconfont" style="float:left;">&#xe65e;</i>
                    <template v-if="data.matchType!==3006">
                        <div v-if="data.cost == 1">
                            <template v-if="data.groupTypeList && data.groupTypeList[0].groupMoney > 0">
                                {{data.groupTypeList[0].groupMoney |formatMoney }}
                            </template>
                            <template v-else-if="data.groupMoney">
                              {{ Number(data.groupMoney) > 0 ? data.groupMoney+'元':'免费'}}
                            </template>      
                            <template v-else> 
                              免费
                            </template>                      
                        </div>
                        <div v-else>
                            免费
                        </div>                        
                    </template>
                    <template v-else style="float:left;"> <!--跑步 -->
                        <el-row v-if="data.isPreview">
                          <el-col :span="2">                              
                              <ul>
                                <li class="groups" v-for="(item,index) in data.groupTypeList" :key="index">
                                    {{item}}
                                </li>
                              </ul>
                          </el-col>
                          <el-col :span="2">
                              <ul>
                                <li class="groups" v-for="(item,index) in data.groupTypeMoneyList"  :key="index">
                                    {{item > 0 ? item + '元': '免费'}}
                                </li>
                              </ul>
                          </el-col>
                        </el-row>
                        <el-row v-else>
                          <template v-if="data.matchGroupMappingRespList">
                            <el-col :span="3">
                              <ul>
                                <li class="groups" v-for="item in data.matchGroupMappingRespList" :key="item.groupTypeStr">
                                  {{item.groupTypeStr}}
                                </li>
                              </ul>
                            </el-col>
                            <el-col :span="3">
                              <ul>
                                <li class="groups" v-for="item in data.matchGroupMappingRespList"  :key="item.groupMoney">
                                  <template v-if="item.groupMoney==0">
                                    免费
                                  </template>
                                  <template v-else>
                                    {{item.groupMoney|formatMoney}}
                                  </template>                                 
                                </li>
                              </ul>
                            </el-col>
                          </template>
                          <template v-else>
                            <el-col :span="4">
                              <ul>
                                <li class="groups hidden" v-for="item in data.groupTypeList" :key="item.groupName">
                                  {{item.groupName}}
                                </li>
                              </ul>
                            </el-col>
                            <el-col :span="3">
                              <ul>
                                <li class="groups" v-for="item in data.groupTypeList"  :key="item.groupMoney">
                                 <template v-if="item.groupMoney==0">
                                    免费
                                  </template>
                                  <template v-else>
                                    {{item.groupMoney|formatMoney}}
                                  </template>  
                                </li>
                              </ul>
                            </el-col>
                          </template>
                        </el-row>
                    </template>
                </li>
            </ul>
        </el-col>
    </el-row>
</template>

<script>
  import MatchStatus from './MatchStatus'
  import { mapGetters } from 'vuex'
  export default {
    components: {
      MatchStatus
    },
    props: {
      data: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    computed: {
      ...mapGetters({
        global: 'global'
      })
    }
  }
</script>

<style lang="scss" scoped>
  .race-info {
    padding: 60px;
    background-color: #fff;
    .logo{
      width: 118px;
      height: 118px;
      border-radius: 50%;
    }
    li {
      margin: 5px 0;
      &:first-child {
        margin-bottom: 16px;
        h1 {
          font-size: 24px;
          line-height: 24px;
          display: inline-block;
          margin-right: 20px;
        }
      }
      .iconfont {
          margin-right: 10px;
          font-size: 14px;
      }
    }
    .font-lg{
      font-size: 14px;
    }
  }
  .groups{
    margin:2px 0!important;
  }
</style>
